@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    店铺:
                    <i-select v-model="shop_id" placeholder="请选择店铺" style="width:180px">
                        <i-option value="0">全部店铺</i-option>
                        <i-option v-for="shop of shops" :value="shop.shop_id">@{{shop.shop_name}}</i-option>
                    </i-select>
                </span>



                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 200px"
                                  @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 200px"
                                  @on-change="dateEndFormat">
                    </date-picker>
                </span>
                <span style="padding-left: 10px">
                       &nbsp&nbsp&nbsp时间类型:
                      <i-select v-model="time_type" style="width:150px">
                          <i-option :value="item.val" v-for="item of time_tpyes">@{{item.text}}</i-option>
                      </i-select>
                </span>

            </i-col>
            <i-col  style="margin: 20px ;width: 100%">
                <span>
                   &nbsp&nbsp&nbsp订单状态:
                    <i-select v-model="order_status" placeholder="请选择订单状态" style="width:200px">
                        <i-option :value="item.val" v-for="item of status_arr">@{{item.text}}</i-option>
                    </i-select>
                </span>

                <span>
                    订单号:
                     <i-input v-model="order_id" style="width:200px"></i-input>
                </span>

                <span>
                     &nbsp&nbsp&nbsp是否结算:
                    <i-select v-model="no_sett" placeholder="请选择结算状态" style="width:180px">
                        <i-option value="0">全部</i-option>
                        <i-option value="1">未结算</i-option>
                    </i-select>
                </span>

                <span>
                   &nbsp&nbsp&nbsp结算类型:
                    <i-select v-model="sett_type" placeholder="请选择类型" style="width:200px">
                        <i-option value="0" >全部</i-option>
                        <i-option :value="item.val" v-for="item of sett_types" :key="item.val">@{{ item.text }}</i-option>
                    </i-select>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="orderList">查询</i-button>
                       <span>
                          <i-button  type="error" @click="updateOrder(0)">同步订单</i-button>
                      </span>
                      <a :href="exp" style="display: inline-block;margin-left: 15px">导出订单</a>
                </span>
            </i-col>
            <i-col style="width: 70% ;margin:20px">
                <Card>
                    <span  style="display:inline-block;width: 140px">(核算)订单数：@{{card.order_count}}</span>
                    <span  style="display:inline-block;width: 140px">订单数：@{{card.unique_count}}</span>
                    <span  style="display:inline-block;width: 200px">实际计算总额：@{{card.total_sett_amount}}</span>
                    <span v-if="card.shop_total_price == card.total_payment_online" style="display:inline-block;">
                       <span style="display:inline-block;">在线结算金额 :@{{ card.total_payment_online }}</span>
                        <span style="display:inline-block;margin-left: 40px">付款金额 :@{{ card.shop_total_price }}</span>
                    </span>

                    <span v-else style="display:inline-block;">
                        <span style="display:inline-block;">在线结算金额 :<span style="color:red;">@{{ card.total_payment_online }}</span></span>
                        <span style="display:inline-block;margin-left: 40px">付款金额 :@{{ card.shop_total_price }}</span>
                    </span>
                </Card>
            </i-col>
            <i-col style="width: 90% ;margin:20px">
                <Card>
                    <span  style="display:inline-block;width: 200px;margin: 5px">付款金额：@{{toThousand(tip.total_amount)}}</span>
                    <span  style="display:inline-block;width: 300px;margin: 5px">未发货退款成功：@{{toThousand(tip.wfhtk)}}(@{{tip.wfhtk_rate}})</span>
                    <span  style="display:inline-block;width: 300px;margin: 5px">已发货退款成功：@{{toThousand(tip.yfhtk)}}(@{{tip.yfhtk_rate}})</span>
                    <span  style="display:inline-block;width: 200px;color:red;margin: 5px">平台应该结算：@{{toThousand(tip.sjlr)}}</span>
                    <span  style="display:inline-block;width: 200px;color:red;margin: 5px">实际收到结算：@{{toThousand(tip.sjsdjs)}}</span>
                    <span  style="display:inline-block;width: 200px;color:red;margin: 5px">平台服务费：@{{toThousand(tip.total_sett_ptfwf)}}</span>
                    <span  style="display:inline-block;width: 200px;margin: 5px">最终成交率：@{{tip.zzcj_rate}}</span>
                    <span  style="display:inline-block;width: 200px;margin: 5px;color:red;font-weight: bold">结算未到账：@{{tip.jswdz}}</span>
                </Card>
            </i-col>

        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="orderList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '订单号',
                            width: '200',
                            render:(h,params) => {
                                let order_id = params.row.order_id;
                                let sett_payment_online = params.row.sett_payment_online;
                                let color = 'green';
                                let size = '12px';
                                if(!sett_payment_online){
                                    color = 'red';
                                }
                                return h('div',{
                                    style:{
                                        'color':color,
                                        'font-size':size
                                    },
                                },order_id)
                            }
                        },
                        {
                            title: '店铺名',
                            key: 'shop_name',
                        },
                        {
                            title:'订单提交时间',
                            key:'create_time',
                        },
                        {
                            title: '订单价格',
                            key:'total_amount',
                        },
                        {
                            title: '订单状态',
                            key:'order_status',
                        },
                        {
                            title: '在线支付(结算)',
                            key:'sett_payment_online',
                        },
                        {
                            title: '实际结算金额(结算)',
                            key:'sett_total_amount',
                        },
                        {
                            title: '渠道',
                            key:'sett_type',
                        }

                    ],
                    spinShow:false,
                    order_id:'',
                    shop_id:'0',
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    colums:[],
                    shops:[],
                    defaultStartTime:'',
                    defaultEndTime:'',
                    options:[],
                    single:false,
                    intervalTime:'',
                    time_type:0,
                    sett_type:0,
                    tip:[],
                    card:[],
                    time_tpyes:[{'val':0,'text':'下单时间'},{'val':1,'text':'结算时间'}],
                    sett_types:[{'val':1,'text':'微信'},{'val':2,'text':'支付宝'},{'val':3,'text':'周期'}],
                    no_sett:'0',
                    upda_time:'',
                    order_status:0,
                    status_arr:[

                        {
                            'val':'0',
                            'text':'全部'
                        },

                        {
                            'val':'2',
                            'text':'备货中'
                        },
                        {
                            'val':'3',
                            'text':'已发货'
                        },
                        {
                            'val':'5,9,15,20,26,27,28,29,31,33,36,37,38',
                            'text':'已完成'
                        },
                        {
                            'val':'12,14,16,21',
                            'text':'未发货退款'
                        },
                        {
                            'val':'6,7,8,10,11,13,17,18,19,22,23,24,30,32,34,35,39',
                            'text':'已发货退款'
                        },
                        {
                            'val':"21",
                            'text':"(退款) 订单退款成功"
                        },
                        {
                            'val':'22,39',
                            'text':'(退款) 售后退款成功'
                        }
                    ]
                }
            },
            mounted(){
                this.defaultStartTime = this.getValidDate(30)+' 00:00:00';
                this.defaultEndTime = this.getValidDate(0)+' 00:00:00';
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            computed: {
                exp() {
                    return '/admin/order/sett/exp?shop_id=' + this.shop_id + '&start_time=' + this.defaultStartTime + '&end_time=' + this.defaultEndTime +
                        '&no_sett=' + this.no_sett + '&order_id=' + this.order_id +
                        '&order_status=' + this.order_status + '&token=' + this.token +
                        '&sett_type=' + this.sett_type + '&time_type=' + this.time_type +
                        '&guide_form=Sett';
                }

            },
            methods: {
                // 初始化店铺
                getShop() {
                    axios.get("https://order.youdnr.com/api/temai/order/fxg_shop_list",{
                    })
                        .then(function (response) {
                            vm.shops = response.data.result;
                        });
                },
                searchList(){   //搜索
                    this.orderLiverList(1);
                    this.orderList(1);
                },
                toThousand(num){
                    var result = '', counter = 0;
                    var dot = String(num).indexOf(".");
                    if(dot != -1){

                        var dotCnt = String(num).substring(dot+1,num.length);

                        // 获取小数点前面的数字
                        num = String(num).split('.')[0]
                        num = (num || 0).toString();
                        for (var i = num.length - 1; i >= 0; i--) {
                            counter++;
                            result = num.charAt(i) + result;
                            if (!(counter % 3) && i != 0) { result = ',' + result; }
                        }
                        result = result + '.' + dotCnt;
                        return result;

                    }else{
                        // alert("没有小数点");
                        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                    }

                },
                dateStartFormat(f,v){
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){
                    this.defaultEndTime = f;
                },
                //获取几天前时间日期
                getValidDate(dayCount = 1){
                    curDate = new Date();
                    var preDate = new Date(curDate.getTime() - dayCount*24*60*60*1000);
                    var year = preDate.getFullYear();
                    var month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    var day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    var time = year + '-' + month + '-' + day;
                    return time;
                },
                getHourDate(hourCount){  //  前几个小时的时间
                    let curDate = new Date();
                    let preDate = new Date(curDate.getTime());
                    h = preDate.getHours()-hourCount;// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }

                    let time = this.getValidDate(0)+' '+h+':'+m+':'+s;
                    return time;

                },
                updateOrder(index){  //同步订单数据
                    console.log(index);

                    if(index >= vm.shops.length){
                        this.$Message.warning('【同步】订单结束');
                        return;
                    }

                    let page    =   0;
                    //console.log(vm.shops[index]);
                    if(vm.shops[index].appKey != '' && vm.shops[index].appSecret != ''){

                        vm.$Message.success('【同步】店铺：'+vm.shops[index].shop_name);
                        let all_page = this.requestOrder(0,vm.shops[index]);//获取总页数
                        console.log('【同步】店铺：'+vm.shops[index].shop_name+'总：'+all_page+'第：'+page+'页');
                        if(all_page != '' && all_page != 0){

                            vm.upda_time = setInterval(function (){
                                page++;
                                if(page == all_page){
                                    clearInterval(vm.upda_time);
                                    index++;
                                    vm.updateOrder(index);
                                }

                                console.log('【同步】店铺：'+vm.shops[index].shop_name+'总：'+all_page+'第：'+page+'页');
                                let data = vm.requestOrder(page,vm.shops[index]);//更新每一页数据

                            },10000);

                        }else{
                            index++;
                            this.updateOrder(index);
                        }
                    }else{
                        index++;
                        this.updateOrder(index);
                    }



                },
                requestOrder(page,shop){
                    var all_page = '';
                    $.ajax({
                        type: "POST",
                        url: "/api/order/fxg_shop_time",
                        async: false,
                        data: {
                            start_time:vm.defaultStartTime,
                            end_time:vm.defaultEndTime,
                            shop_name:shop.shop_name,
                            app_key:shop.appKey,
                            app_secret:shop.appSecret,
                            page:page
                        },
                        dataType: "json",
                        success: function(response){
                            if(response.length == 0){
                                vm.$Message.error('暂无数据');
                            }else{
                                all_page = response.all_page;
                            }
                        },
                         error:function(e){
                             console.log(e);
                         }
                    });
                    return all_page;
                },
                orderList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/sett/list",{
                        params: {
                            token:vm.token,
                            start_time: that.defaultStartTime,
                            end_time: that.defaultEndTime,
                            order_id:that.order_id,
                            page:page,
                            shop_id:this.shop_id,
                            no_sett:this.no_sett,
                            sett_type:this.sett_type,
                            time_type:this.time_type,
                            order_status:this.order_status
                        }
                    })
                        .then(function (response) {
                            vm.tableData = response.data.result.list.data;
                            vm.page.total = response.data.result.list.total;
                            vm.page.current = response.data.result.list.current_page;
                            vm.page.pageSize = response.data.result.list.per_page;
                            vm.card  =   response.data.result.compare;
                            vm.tip = response.data.result.tip;
                            that.spinShow = false;
                        });
                },
                setTimeUpdate(){
                    if(this.single === true){
                        this.intervalTime = setInterval(function () {
                            vm.updateOrder(1);
                        }, 60*1000);
                    }else{
                        clearInterval(this.intervalTime);
                    }
                },
                batch() {
                    let ids = [];
                    this.$refs.selection.getSelection().map(item => {
                        ids.push(item.order_id);
                    });
                    return ids;
                },

            },

        });

        vm.token = getToken();
        vm.getShop();
        vm.orderList(1);

        $("body").addClass("sidebar-collapse");

    </script>

@endsection

